<template>
<div class="container">
  <div class="navigationBar" style="width: 98%;margin: 10px auto 0">
    <el-row :gutter="24">
      <!-- 搜索框 -->
      <el-col :span="5">
        <el-input v-model="listQuery.name" placeholder="请输入门店名称" clearable @change="search"></el-input>
      </el-col>
      <el-col  :span="16">
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-col>

      <el-col :span="3" align="center" class="add-store">
        <el-button type="success" @click="handleAdd">新增门店</el-button>
      </el-col>
    </el-row>
  </div>

  <div class="filter-container">
    <el-checkbox v-model="formThead.name" label="机构名称">机构名称</el-checkbox>
    <el-checkbox v-model="formThead.contact" label="联系人">联系人</el-checkbox>
    <el-checkbox v-model="formThead.address" label="详细地址">详细地址</el-checkbox>
    <el-checkbox v-model="formThead.telephone" label="联系电话">联系电话</el-checkbox>
    <el-checkbox v-model="formThead.wechat_qrcode" label="微信二维码">微信二维码</el-checkbox>
  </div>

  <el-table :data="salesroomList" class="table" border :key="salesroomList.length"
            v-loading="loading"
            element-loading-text="拼命加载中....">

    <el-table-column label="机构名称" align="center" v-if="formThead.name">
      <template slot-scope="{row}">
        <span>{{row.name}}</span>
      </template>
    </el-table-column>

    <el-table-column label="联系人" align="center" v-if="formThead.contact">
      <template slot-scope="{row}">
        <span>{{row.contact}}</span>
      </template>
    </el-table-column>

    <el-table-column label="详细地址" align="center" v-if="formThead.address">
      <template slot-scope="{row}">
        <span>{{ getAddress(row.province_id.province, row.city_id.city, row.country_id.country, row.address)}}</span>
      </template>
    </el-table-column>

    <el-table-column label="联系电话" align="center" v-if="formThead.telephone">
      <template slot-scope="{row}">
        <span>{{row.telephone}}</span>
      </template>
    </el-table-column>

    <el-table-column label="微信二维码" align="center" v-if="formThead.wechat_qrcode">
      <template slot-scope="{row}">
        <img :src="row.wechat_qrcode === ''? null: row.wechat_qrcode" alt="暂无二维码"
             @click="bigImage(row.wechat_qrcode)">
      </template>
    </el-table-column>

    <el-table-column label="操作" align="center"  width="230px">
      <template slot-scope="{row}">
        <el-button size="mini" type="primary" @click="handleEdit(row)" style="margin: 0">编辑</el-button>
        <!-- 根据customer_id将用户删除 -->
        <el-button size="mini" type="danger" @click="openDelete(row.customer_organization_salesroom_id)" style="margin: 0">删除</el-button>
      </template>
    </el-table-column>

  </el-table>

  <transition name="el-zoom-in-top">
    <div v-show="bigImageSrc !== null && bigImageSrc!==''" class="bigImg" @click="bigImage(null)">
      <img :src="bigImageSrc" style="width:auto; height:400px;border-radius:5px;">
    </div>
  </transition>


  <div class="pagination-container">
    <el-pagination :current-page="listQuery.page" :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
  </div>

  <add-salesroom ref="showAddDialog"/>
  <edit-salesroom ref="showEditDialog"/>

</div>
</template>

<script>
  import store from '@/store'
  import {list, del} from '@/api/thk/salesroom'
  import {list as getProvinceAndCityList} from '@/api/thk/city'
  import {list as getOrganizationList} from '@/api/thk/organization'

  import addSalesroom from './add'
  import editSalesroom from './edit'

  export default {
    name: 'saleroom',

    components:{
      addSalesroom,
      editSalesroom
    },

    data(){
      return {
        bigImageSrc: null,
        showSalesroomDialog: false,
        formLabelWidth: '130px',
        salesroomList: [],
        provinceAndCityList: [],
        organizationList: [],

        // customer_organization_salesroom_id: 3
        // organization_id: "7"
        // name: "我的机构"
        // country_id: "东城区"
        // province_id: "北京"
        // city_id: "北京市"
        // address: "广东省河源市"
        // wechat_qrcode: "https://dlxq.oss-cn-shenzhen.aliyuncs.com/1591184167820.com/05bbb693-6539-4a56-be28-3d5da9e993fe"
        // contact: "黄彩平"
        // telephone: "13018458158"
        // deleted: 0

        formThead: {
          name: true,
          address: true,
          contact: true,
          telephone: true,
          wechat_qrcode: true,
        },

        listQuery: {
          name: undefined,
          page: 1,
          pagesize: 10
        },
        total: undefined,
        loading: true
      }
    },

    created() {
      this.getSalesRoomList()
      this.getOrganizationList()
      this.getProvinceAndCityList()
    },

    updated: function () {
      this.$nextTick(function () {
        this.loading = false
      })
    },

    methods: {
      getSalesRoomList(){
        list(store.getters.token, this.listQuery).then(res => {
          this.total = res.data.list.total
          this.salesroomList = res.data.list.data
          console.log('[salesroom]')
          console.log(this.salesroomList)
        }).catch(err => {
          this.$message('获取门店数据失败!')
        })
      },


      // 获取organization数据
      getOrganizationList(){
        getOrganizationList(store.getters.token).then(res => {

          this.organizationList = res.data.list
        }).catch(err => {
          console.log(err)
        })
      },

      // 获取省市数据
      getProvinceAndCityList(){
        getProvinceAndCityList(store.getters.token).then(res => {
          this.provinceAndCityList = res.data.list


          console.log(this.provinceAndCityList)
        }).catch(err => {
          console.log(err)
        })
      },


      // 弹出增加对话框
      handleAdd(){
        // 传递，customerList和provinceAndCityList用于选择所属用于和所属城市
        this.$refs.showAddDialog.cancelSubmit(this.provinceAndCityList, this.organizationList)
      },

      // 编辑店铺，row为回显的数据
      handleEdit(row){
        this.$refs.showEditDialog.showEditDialog(row,this.provinceAndCityList, this.organizationList)
      },

      // 删除店铺方法
      handleDelete(customer_organization_salesroom_id){
        del(store.getters.token, {customer_organization_salesroom_id})
        this.getSalesRoomList()
      },

      openDelete(customer_organization_salesroom_id) {
        this.$confirm('此操作将会删除门店, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.handleDelete(customer_organization_salesroom_id)
          this.$message({
            type: 'success',
            message: '删除成功!'

          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      getAddress(province, city, country, address){
        let detailedAddress = ""
        if(province !== null && province !== ''){
          detailedAddress += (province+"省")
        }
        return detailedAddress + city + country + address
      },

      // 搜索功能
      search(){
        this.listQuery.page = 1
        this.getSalesRoomList()
      },


      handleSizeChange(val) {
        this.listQuery.pagesize = val
        this.getSalesRoomList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getSalesRoomList()
      },

      // 大图弹窗函数
      bigImage(src) {
        if (src!==null) {
          this.$set(this, 'bigImageSrc', src)
          console.log(this.bigImageSrc)
        } else {
          this.$set(this, 'bigImageSrc', null)
        }
      },

    },


  }
</script>

<style scoped>

  img{
    height: 50px;
    width: 50px;
    margin: 0;
    padding: 0;
  }
  .filter-container{
    margin: 10px 0 0 20px;
  }
  .table{
    width: 98%;
    margin: 10px auto 0;
  }
  .add-store{
    position: relative;
    top: 35px;
  }
  .bigImg img{
    max-width: 600px;
    min-width: 150px;
    height:auto;
    border-radius:10px;
  }

  .bigImg {
    min-width: 100%;
    min-height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, .5);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /*transition:1s;*/
  }
  i::before{
    /*display: inline-block;*/
    font-size: 20px;
    height: 18px;
    width: 18px;
  }

  i:hover{
    color: #409EFF;
  }

</style>
